.header-line-container {
  position: absolute;
  display: flex;
  width: calc(100% - 90px);
  height: 30px;
  background-color: rgba(33, 37, 41, 0.09);
  border-radius: 17px 2px 2px 17px;
}

.header-line-container-left {
  position: relative;
  top: 2px;
  left: 3px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.header-line-container-top {
  position: relative;
  top: 0;
  left: -26px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 30px;
  color: #fff;
  background-color: #5664ff;
  border-radius: 17px 0 0 17px;
}

.header-line-container-right {
  position: relative;
  top: 0;
  left: -132px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: end;
  width: 100px;
  height: 30px;
  color: #fff;
}

.header-line-container-triangle {
    position: relative;
    top: 0;
    left: -126px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: end;
    width: 0;
    height: 0;
    color: #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 16px solid #5664ff
}
